<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
		xmlns:h="http://java.sun.com/jsf/html"
		xmlns:ui="http://java.sun.com/jsf/facelets"
		xmlns:f="http://java.sun.com/jsf/core"
		xmlns:c="http://java.sun.com/jsp/jstl/core"
		xmlns:p="http://primefaces.org/ui"
		xmlns:appcc="http://java.sun.com/jsf/composite/components"
		contentType="text/html" 
	template="/WEB-INF/layouts/main.xhtml"
	encoding="UTF-8" lang="${userContext.locale}">
	
	<ui:define name="content">
			
					<h:form id="newPasswordForm">
					
						<p:panel styleClass="blank center" >
							
								<p:messages id="messageNewPassword" showDetail="true" autoUpdate="true" closable="true" style="width:20%"/> 
								<p:panel styleClass="blank">
									<h:outputText value="#{subscription.getPassword()}" styleClass="customeText"/>
								</p:panel>	
								
								<h:panelGrid columns="4" rendered="#{subscription.canChangeHisPassword}"
										styleClass="trjdk-main-content-subscription-form" width="100px">
								
										<!-- New password -->
										<h:outputText value="#{messages['main.getPassword.new.password']}" 
											styleClass="customeText"/>
										
										<p:password id="newPassword" styleClass="trjdk-main-banner-content-subscription-inputText" 
											value="#{subscription.criteria.motDePasse1}" required="true"
											label="#{messages['main.getPassword.new.password']}"/>
										<p:watermark for="newPassword" value="#{messages['main.getPassword.new.password']}" />
										<p:message display="icon" for="newPassword"/>  
										
										<!-- Confirm the password -->
										<h:outputText value="#{messages['main.getPassword.confirm.password']}" 
											styleClass="customeText"/>
										
										<p:password id="confirmPassword" styleClass="trjdk-main-banner-content-subscription-inputText" 
											value="#{subscription.criteria.motDePasse2}" required="true"
											label="#{messages['main.getPassword.confirm.password']}"/>
										<p:watermark for="confirmPassword" value="#{messages['main.getPassword.confirm.password']}" />
										<p:message display="icon" for="confirmPassword"/>  
										
										<!-- get new password -->
										<h:commandButton value="${messages['main.valider.label']}" 
												styleClass="trjdk-main-banner-content-subscription-button"
												action="#{subscription.doChangePassword}">
										</h:commandButton>	
								</h:panelGrid>
						</p:panel>
				
				</h:form>
			
	</ui:define>
</ui:composition>